<template>
  <div class="loginPanel">
    <header>聊天系统</header>
    <Login v-show="panelType == 'login'"></Login>
    <Register v-show="panelType == 'register'"></Register>
  </div>
</template>

<script setup lang='ts'>
import Login from "@/components/login/Login";
import Register from "@/components/login/Register";
import { storeToRefs } from "pinia";
import { useLoginStore } from "@/stores/modules/login"; //路径别名，引入store
const loginStore = useLoginStore();
const { panelType } = storeToRefs(loginStore);
</script>

<style lang='scss' scoped>
.loginPanel {
  position: relative;
  background-color: white;
  padding: 24px;
  border-radius: 10px;
  width: 360px;
  position: fixed;
  right: 100px;
  top: 100px;
  header {
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
  }
}
</style>
